<template>
	<view class="content">
		<!-- 头部信息 开始 -->
		<view class="mine_header">
			<view class="auto_container">
				<view class="person ">
					<view class="no_login display align-items" v-if="isOpenid==0">
						<view class="left">
							<image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2389998747,3300817372&fm=26&gp=0.jpg" mode=""></image>
						</view>
						<view class="login_title  ">
							<view>请登录/注册您的账号</view>
							<button class='testbutton' open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">点击登录</button>
						</view>
					</view>
					<view class="left" @click="seeUserInfo" v-if="isOpenid==1">
						<image :src="imgUrl+userInfo.avatar" mode=""></image>
						<view class="person_left">
							<view class="name display align-items">
								<text class="names ellipsis">{{userInfo.nickname}}</text>
								<text class="tj ellipsis" v-if="userInfo.parent_name!=null">推荐人:{{userInfo.parent_name}}</text>
							</view>
							<view class="invite display align-items">
								<text class="yq">邀请码：{{userInfo.ucode}}</text>
								<text class="cop" @tap.stop="copy(userInfo.ucode)">复制</text>
							</view>
						</view>
					</view>
					<image class="fh" v-if="isOpenid==1" src="../../static/icon/fh.png" mode="" @click="seeUserInfo"></image>
				</view>
			</view>
		
		</view>

		<!-- 头部信息 结束 -->
		<!-- 余额积分 开始 -->
		<view class="balance auto_container">
			<view class="left" @click="goBalance">
				<view class="name" v-if="isOpenid==1">
					¥{{userInfo.amount}}
				</view>
				<view class="name" v-else>
					-
				</view>
				<view class="title">
					余额
				</view>
			</view>
			<view class="left" @click="goIntegral">
				<view class="name" v-if="isOpenid==1">
					{{userInfo.score}}
				</view>
				<view class="name" v-else>
					-
				</view>
				<view class="title">
					复购积分
				</view>
			</view>
			<view class="right" @click="goTravel">
				<view class="name" v-if="isOpenid==1">
					{{userInfo.fund}}
				</view>
				<view class="name" v-else>
					-
				</view>
				<view class="title">
					旅游基金
				</view>
			</view>
		</view>
		<!-- 余额积分 结束 -->
		<!-- 个人操作 开始 -->
		<view class="operation auto_container">
			<view class="top">
				<view class="left">
					我的订单
				</view>
				<view class="right display align-items" @click="arderBtn(0)">
					查看全部订单
					<image style="margin-left: 15rpx;" src="../../static/icon/fh.png" class="fh" mode=""></image>
				</view>
			</view>
			<view class="info">
				<view class="list" @click="arderBtn(1)">
					<image class="order_icon" src="../../static/icon/mine_dfk.png" mode=""></image>
					<view class="title" style="font-size: 26rpx;">
						待付款
					</view>
				</view>
				<view class="list" @click="arderBtn(2)">
					<image class="order_icon" src="../../static/icon/mine_dfh.png" mode=""></image>
					<view class="title" style="font-size: 26rpx;">
						待发货
					</view>
				</view>
				<view class="list" @click="arderBtn(3)">
					<image class="order_icon" src="../../static/icon/mine_dsh.png" mode=""></image>
					<view class="title" style="font-size: 26rpx;">
						待收货
					</view>
				</view>
				<view class="list" @click="arderBtn(4)">
					<image class="order_icon" src="../../static/icon/mine_ywc.png" mode=""></image>
					<view class="title" style="font-size: 26rpx;">
						已完成
					</view>
				</view>
			</view>
			<view class="caozuo">
				<view class="list" @click="seeRecharge">
					<view class="left">
						<view class="mine_icon_container display justify-content align-items">
							<image class="list_icon_fl list_icon_fl1" src="../../static/icon/mine_cz.png" mode=""></image>
						</view>
						<text>充值记录</text>
					</view>
					<image src="../../static/icon/fh.png" class="fh" mode=""></image>
				</view>
				<view class="list" @click="seeAddress">
					<view class="left">
						<view class="mine_icon_container display justify-content align-items">
							<image class="list_icon_fl list_icon_fl2" src="../../static/icon/mine_shdz.png" mode=""></image>
						</view>
						<text>收货地址</text>
					</view>
					<image src="../../static/icon/fh.png" class="fh" mode=""></image>
				</view>
				<!-- <view class="list" @click="seeWithdrawal">
					<view class="left">
						<view class="mine_icon_container display justify-content align-items">
							<image class="list_icon_fl list_icon_fl1" src="../../static/icon/zhuanzhang.png" mode=""></image>
						</view>
						<text>提现</text>
					</view>
					<image src="../../static/icon/fh.png" class="fh" mode=""></image>
				</view> -->
			</view>
		</view>
		<!-- 个人操作 结束 -->
		<!-- <is-login></is-login> -->
		<view class="islogin" v-if="isPhone">
			<view class="back islogin_container border">
				<view class="islogin_container_again">
					<view class="islogin_name">提示</view>
					<view class="des">
						获取您的手机号
					</view>
					<view class="islogin_bottom display space-between ">
						<button class="left" @click="canclePopup">取消</button>
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">允许</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uniIcons
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniIcons,
		},
		data() {
			return {
				userInfo: {
					avatar: '',
					nickname: '',
					parent_name: null,
					ucode: ''
				},
				imgUrl: null,
				isCanUse: uni.getStorageSync('isCanUse'),
				isOpenid: '',
				isPhone: false
			}
		},
		onShow() {
			
			this.imgUrl = this.$imgUrl
			if (!uni.getStorageSync('openid')) {
				this.isOpenid = 0
			} else {
				this.isOpenid = 1
				this.getUserList()
			}
		},
		onPullDownRefresh() {
			if (!uni.getStorageSync('openid')) {
				this.isOpenid = 0
				uni.stopPullDownRefresh()
			} else {
				this.isOpenid = 1
				uni.showToast({
					icon: 'loading',
					title: '加载中',
				});
				setTimeout(() => {
					this.getUserList(() => {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
				}, 1000)
			}
		},
		methods: {
			copy: function(value) {
				uni.setClipboardData({
					data: value, // 要复制的文字
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功'
								});
							}
						});
					}
				});
			},
			canclePopup() {
				this.isPhone = false
				uni.setStorageSync('isPhoneEdit', '1')
			},
			// 点击登录
			// getuserinfo: function() {
			// 	let that = this
			// 	uni.authorize({
			// 		scope: 'scope.userInfo',
			// 		success() {
			// 			that.goLogin()
			// 		},
			// 		fail() {
			// 			uni.showModal({
			// 				title: '提示',
			// 				content: '为了您的下一步操作,请同意授权',
			// 				confirmText: "确认",
			// 				cancelText: '取消',
			// 				success: (res) => {
			// 					if (res.confirm) {
			// 						uni.openSetting({
			// 							success: (res) => {
			// 								console.log(res);
			// 								that.goLogin()
			// 							}
			// 						})
			// 					} else {
			// 						console.log('取消');
			// 						return false;
			// 					}
			// 				}
			// 			})
			// 			return false;
			// 		}
			// 	})

			// },
			getuserinfo() {
				let that = this
				uni.showLoading({
					title: '登录中...'
				});
				wx.login({
					success(res) {
						if (res.code) {
							//发起网络请求
							var code = res.code
							var data = {
								code: code
							}
							that.$myRequest.post(that.$api.login.mpLogin, data).then(res1 => {
								if (res1.code == '200') {
									that.getUserListAgain(res1.data.openid)

								} else {
									uni.showToast({
										title: res1.msg,
										icon: "none"
									})
								}
							})
						} else {

						}
					}
				})
			},
			// 分享者绑定
			bingCode() {
				let that = this
				var formopenid = uni.getStorageSync('formopenid')
				var data = {
					openid: uni.getStorageSync('openid'),
					ucode: formopenid
				}
				that.$myRequest.post(that.$api.bingCode.bingCode, data).then(res => {
					console.log(res)
					if (res.code == '200') {
						that.getUserList()

					} else {
						console.log(res.msg)
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: "none"
						// })
					}
				})
			},
			// 判断是否需要上次上传个人信息
			isUpInfo(openid) {
				let that = this
				wx.getUserInfo({
					success: function(res2) {
						console.log(res2)
						uni.hideLoading()
						var userInfo = res2.userInfo
						var data2 = {
							openid: openid,
							nickname: userInfo.nickName,
							avatar: userInfo.avatarUrl,
							gender: userInfo.gender,
							country: userInfo.country,
							province: userInfo.province,
							city: userInfo.city,
						}
						that.$myRequest.post(that.$api.mine.setUserinfo, data2).then(res3 => {
							if (res3.code == '200') {
								that.isOpenid = 1
								uni.setStorageSync('openid', openid)
								that.getUserList()
								var formopenid = uni.getStorageSync('formopenid')
								// 去执行 邀请绑定
								if (formopenid) {
									that.bingCode()
								}
							} else {
								uni.showToast({
									title: res3.msg,
									icon: "none"
								})
							}
						})
					},
					fail: res => {
						uni.hideLoading()
						uni.showToast({
							title: '授权失败',
							icon: "none"
						})
						// 获取失败的去引导用户授权 
					}
				})
			},
			// 获取手机号
			getPhoneNumber(e) {
				let that = this
				this.isPhone = false
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权  
					//拒绝授权后弹出一些提示  
					uni.setStorageSync('isPhoneEdit', '1')
				} else { //允许授权  
					var data = {
						openid: uni.getStorageSync('openid'),
						data: e.detail.encryptedData,
						iv: e.detail.iv
					}
					this.$myRequest.post(this.$api.mine.setMobile, data).then(res => {
						if (res.code == '200') {
							uni.setStorageSync('isPhoneEdit', '1')
							this.getUserList()
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					})
				}
			},
			// 再次获取信息
			getUserListAgain(openid) {
				let that = this
				var data = {
					openid: openid
				}
				this.$myRequest.post(this.$api.mine.user, data).then(res => {
					if (res.code == '200') {
						var user = res.data.data
						if (user.edit_state == 0) {
							that.isUpInfo(openid)

						} else {
							this.isOpenid = 1
							this.userInfo = res.data.data
							uni.setStorageSync('openid', openid)
							uni.setStorageSync('userInfo', user)
							uni.hideLoading()
							var formopenid = uni.getStorageSync('formopenid')
							// 去执行 邀请绑定
							if (formopenid) {
								that.bingCode()
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 获取个人信息
			getUserList(callback) {
				let that = this
				var data = {
					openid: uni.getStorageSync('openid')
				}
				this.$myRequest.post(this.$api.mine.user, data).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.isOpenid = 1
						this.userInfo = res.data.data
						var user = res.data.data
						uni.setStorageSync('userInfo', user)
						if (!uni.getStorageSync('isPhoneEdit')) {
							if (user.mobile == '') {
								that.isPhone = true
							}
						}
						callback && callback()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 积分互转
			goIntegral() {
				if (!uni.getStorageSync('openid')) {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					})
				} else {
					uni.navigateTo({
						url: "./accountsIntegral/accountsIntegral"
					})
				}
			},
			// 旅游基金
			goTravel(){
				// if (!uni.getStorageSync('openid')) {
				// 	uni.showToast({
				// 		title: '请先登录',
				// 		icon: "none"
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: "travelInfo/travelInfo"
				// 	})
				// }
			},
			// 余额互转
			goBalance() {
				if (!uni.getStorageSync('openid')) {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					})
				} else {
					uni.navigateTo({
						url: "./accountsBalance/accountsBalance"
					})
				}

			},
			// 跳转全部订单页面
			arderBtn(id) {
				if (!uni.getStorageSync('openid')) {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					})
				} else {
					uni.navigateTo({
						url: "orderForm/index?status=" + id
					})
				}

			},
			// 个人信息跳转
			seeUserInfo() {
				uni.navigateTo({
					url: "user/user"
				})
			},
			seeRecharge() {
				if (!uni.getStorageSync('openid')) {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					})
				} else {
					uni.navigateTo({
						url: "recharge/recharge"
					})
				}

			},
			seeAddress() {
				if (!uni.getStorageSync('openid')) {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					})
				} else {
					uni.navigateTo({
						url: "address/address"
					})
				}
			},
			// 提现
			seeWithdrawal() {
				let that = this
				if (!uni.getStorageSync('openid')) {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					})
				} else {
					uni.navigateTo({
						url: "withDrawal/withDrawal"
					})
				}
			},
			goIndex() {
				uni.navigateTo({
					url: "../home/indexs/indexs"
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.auto_container {
		width: 690rpx;
		margin: 0 auto;
	}
	.content {
		.mine_header {
		// background-color: #ec615c;
			padding: 25rpx 0;
			.person {
				height: 110rpx;
				width: 100%;
				display: flex;
				align-items: center;

				.no_login {
					.left {
						height: 110rpx;
						display: flex;
						width: 150rpx;

						image {
							width: 110rpx;
							height: 110rpx;
							border-radius: 100%;
							margin-right: 30rpx;
						}
					}

					.login_title {
						width: 300rpx;

						view {
							font-size: 24rpx;
							color: #333;
						}

						button {
							width: 105rpx;
							height: 40rpx;
							line-height: 40rpx;
							font-size: 20rpx;
							background: #e5e5e5;
							color: #ff7d7d;
							margin: 0;
							padding: 0;
							border-radius: 15rpx;
							margin-top: 15rpx;
						}

						button::after {
							border: none;
						}
					}
				}

				.left {
					height: 110rpx;
					width: 100%;
					display: flex;
					margin: 36rpx 0;

					image {
						width: 110rpx;
						height: 110rpx;
						border-radius: 100%;
						margin-right: 30rpx;
					}

					.person_left {
						.name {
							margin-top: 19rpx;
							color: #294D7C;
							font-size: 30rpx;

							.names {
								max-width: 200rpx;
								// display: inline-block;
								font-size: 34rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #333333;
								padding-right: 20rpx;
							}

							.tj {
								max-width: 200rpx;
								padding: 3rpx 15rpx;
								text-align: center;
								font-size: 18rpx;
								line-height: 35rpx;
								background: #F7DBC6;
								border-radius: 14rpx;
								color: #AC6E40;
							}
						}

						.invite {
							margin-top: 8rpx;

							.yq {
								// width: 160rpx;
								height: 24rpx;
								font-size: 26rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #666666;
								line-height: 30rpx;
							}

							.cop {
								width: 60rpx;
								// padding: 1px 0;
								// height: 26rpx;
								border: 1px solid #666666;
								border-radius: 13rpx;
								display: inline-block;
								color: #666666;
								// line-height: 26rpx;
								font-size: 18rpx;
								text-align: center;
								margin-left: 20rpx;
							}
						}
					}
				}
			}
		}


		.balance {
			width: 100%;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 10rpx 0px rgba(90, 96, 105, 0.14);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			text-align: center;
			margin-top: 25rpx;

			.left {
				flex: 1;
				border-right: 2rpx solid #E6E8EF;

				.name {
					font-size: 30rpx;
					color: #294D7C;
					font-weight: bold;
				}

				.title {
					font-size: 26rpx;
					color: #333333;
					margin-top: 8rpx;
				}
			}

			.right {
				flex: 1;

				.name {
					font-size: 30rpx;
					color: #294D7C;
					font-weight: bold;
				}

				.title {
					font-size: 26rpx;
					color: #333333;
				}
			}
		}

		.operation {
			.top {
				display: flex;
				justify-content: space-between;
				margin-top: 44rpx;

				.left {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					line-height: 30rpx;
				}

				.right {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
					line-height: 30rpx;

					uni-icons {
						padding-left: 14rpx;
					}
				}
			}

			.info {
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-bottom: 1rpx solid #E5E5E5;
				text-align: center;
				font-size: 26rpx;
				color: #333;
				padding: 25rpx 0 22rpx 0;

				view {
					margin-top: 5rpx;
				}
			}
		}

		.caozuo {
			margin-top: 25rpx;

			.list {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					line-height: 70rpx;
					display: flex;
					align-items: center;

					text {
						padding-left: 20rpx;
						color: #333333;
						font-size: 26rpx;
					}
				}
			}
		}
	}

	.order_icon {
		width: 48rpx;
		height: 41rpx;
	}

	.mine_icon_container {
		width: 36rpx;
		height: 36rpx;

		.list_icon_fl1 {
			width: 36rpx;
			height: 36rpx;
		}

		.list_icon_fl2 {
			width: 31rpx;
			height: 36rpx;
			margin: auto;
		}
	}

	.fh {
		width: 15rpx;
		height: 27rpx;
	}

	.islogin {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);

		.islogin_container {
			width: 540rpx;
			height: 295rpx;
			border-radius: 8rpx;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			text-align: center;

			.islogin_container_again {
				position: relative;
				height: 295rpx;
			}

			.islogin_name {
				color: #333333;
				font-size: 34rpx;
				padding-top: 45rpx;
			}

			.des {
				color: #555555;
				font-size: 24rpx;
				margin-top: 20rpx;
			}

			.islogin_bottom {
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 65rpx;
				border-top: 1px solid #E6E8EF;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;

				button {
					width: 50%;
					height: 100%;
					font-size: 28rpx;
					color: #294D7C;
					background-color: #fff;
					border: none;
				}

				button::after {
					border: none;
				}

				.left {
					border-right: 1px solid #E6E8EF;
				}
			}
		}

	}
</style>
